<script setup lang="ts">
  import { PropType } from 'vue'

  defineOptions({
    name: 'CustomerReceiveInfoReturnFactory',
  })

  const props = defineProps({
    receiveInfo: {
      type: Object as PropType<{
        name: string
        phone: string
        address: string
        receiptMethod: 1 | 2
      }>,
      default: () => {
        return {
          name: '',
          phone: '',
          address: '',
          receipt: 2,
        }
      },
    },
  })
</script>

<template>
  <div class="return-factory-detail-service-report">
    <div class="title">公司收货信息</div>
    <div class="info-list">
      <div class="info-item">
        <div class="label">取件方式:</div>
        <div class="value">{{ props.receiveInfo.receiptMethod === 1 ? '自取' : '快递寄回' }}</div>
      </div>
      <div class="info-item">
        <div class="label">收货人姓名:</div>
        <div class="value">{{ props.receiveInfo.name }}</div>
      </div>
      <div class="info-item">
        <div class="label">收货手机:</div>
        <div class="value">{{ props.receiveInfo.phone }}</div>
      </div>
      <div class="info-item">
        <div class="label">收货地址:</div>
        <div class="value">{{ props.receiveInfo.address }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .return-factory-detail-service-report {
    display: flex;
    flex-direction: column;
    row-gap: 6px;

    .title {
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
      font-size: 12px;
      font-weight: bold;
    }

    .info-list {
      padding: 0 0 0 9px;
      display: flex;
      flex-wrap: wrap;
      column-gap: 48px;
      row-gap: 4px;
      flex-direction: column;

      .info-item {
        display: flex;
        column-gap: 5px;

        .label {
          min-width: 62.89px;
          max-width: 62.89px;
          text-align: right;
          color: #606266;
          white-space: nowrap;

          div {
            width: 3px;
          }
        }
      }
    }
  }
</style>
